<%--
  Created by IntelliJ IDEA.
  User: sofwin
  Date: 2021/7/12
  Time: 11:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath() + "/";%>
<!doctype html>
<html>
<head>
    <base href="<%=path%>">
    <title>用户列表</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">

</head>
<style>
</style>
<body style="background-color: #f3f3f4">
<div class="container" style="width: 100%;">
    <div class="row" style="height:700px;" id="container">
        <div class="col-md-2" id="left"
             style="margin-top:10px;height:100%;background-color: #ffffff;box-shadow: 1px 1px 3px rgba(0,0,0,.2);padding:10px 10px;border-radius: 10px;line-height: 50px;">

            <div class="panel panel-default">
                <div class="panel-heading" style="height: 50px;">
                    工具
                </div>
                <div class="panel-body">
                    <div class="ztree"></div>
                </div>
            </div>

        </div>
        <div class="col-md-10" id="right">
            <div class="row"
                 style="background-color: #ffffff;box-shadow: 1px 1px 3px rgba(0,0,0,.2);margin: 10px 10px;padding:10px 10px;border-radius: 10px;line-height: 50px;">
                <form class="form-inline">
                    <div class="form-group">
                        <label>登录名</label>
                        <input type="text" class="form-control" name="loginAccount" id="loginAccount" placeholder="">
                    </div>
                    <div class="form-group">
                        <label>手机号</label>
                        <input type="text" class="form-control" name="mobile" id="mobile" placeholder="">
                    </div>
                    <div class="form-group">
                        <label>用户状态</label>
                        <select class="form-control" name="status" id="status">
                            <option value="-1">--全部--</option>
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>创建时间</label>
                        <input type="text" id="beginDate" class="form-control" placeholder="">
                        <input type="text" id="endDate" class="form-control" placeholder="">
                    </div>
                    <button type="button" class="btn btn-primary query">
                        <i class="fa fa-search"></i> 搜索
                    </button>
                    <button type="reset" class="btn btn-warning">
                        <i class="fa fa-refresh"></i>
                        重置
                    </button>
                </form>
            </div>
            <div class="row"
                 style="background-color: #ffffff;box-shadow: 1px 1px 3px rgba(0,0,0,.2);margin: 10px 10px;padding:10px 10px;border-radius: 10px;">
                <div id="toolbar">
                    <button class="btn btn-danger" id="add">
                        <i class="fa fa-plus" aria-hidden="true">&nbsp;</i>新增
                    </button>
                    <button id="edit" class="btn btn-danger">
                        <i class="fa fa-pencil fa-fw"> &nbsp;</i>编辑
                    </button>
                    <button id="remove" class="btn btn-danger">
                        <i class="fa fa-trash-o fa-fw"> &nbsp;</i>删除
                    </button>
                </div>
                <table id="userData"></table>
            </div>
        </div>
    </div>
</div>

</body>


<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
<script>
    var $table=$('#userData')
    var data = JSON.parse(
        '[{"id":1,"pid":0,"status":1,"name":"用户管理","permissionValue":"open:user:manage"},' +
        '{"id":2,"pid":0,"status":1,"name":"系统管理","permissionValue":"open:system:manage"},' +
        '{"id":3,"pid":1,"status":1,"name":"新增用户","permissionValue":"open:user:add"},' +
        '{"id":4,"pid":1,"status":1,"name":"修改用户","permissionValue":"open:user:edit"},' +
        '{"id":5,"pid":1,"status":0,"name":"删除用户","permissionValue":"open:user:del"},' +
        '{"id":6,"pid":2,"status":1,"name":"系统配置管理","permissionValue":"open:systemconfig:manage"},' +
        '{"id":7,"pid":6,"status":1,"name":"新增配置","permissionValue":"open:systemconfig:add"},' +
        '{"id":8,"pid":6,"status":1,"name":"修改配置","permissionValue":"open:systemconfig:edit"},' +
        '{"id":9,"pid":6,"status":0,"name":"删除配置","permissionValue":"open:systemconfig:del"},' +
        '{"id":10,"pid":2,"status":1,"name":"系统日志管理","permissionValue":"open:log:manage"},' +
        '{"id":11,"pid":10,"status":1,"name":"新增日志","permissionValue":"open:log:add"},' +
        '{"id":12,"pid":10,"status":1,"name":"修改日志","permissionValue":"open:log:edit"},' +
        '{"id":13,"pid":10,"status":0,"name":"删除日志","permissionValue":"open:log:del"}]');

    $(function() {

        //控制台输出一下数据
        console.log(data);

        $table.bootstrapTable({
            url:'bootstrap/js/demo/tree.json?t='+new Date(),
            idField: 'id',
            dataType:'json',
            toolbar:"#toolbar",
            showRefresh:true,
            showExport:true,
            initExport:true,
            columns: [
                { field: 'check',  checkbox: true, formatter: function (value, row, index) {
                        if (row.check == true) {
                            // console.log(row.serverName);
                            //设置选中
                            return {  checked: true };
                        }
                    }
                },
                { field: 'name',  title: '名称' },
                // {field: 'id', title: '编号', sortable: true, align: 'center'},
                // {field: 'pid', title: '所属上级'},
                { field: 'status',  title: '状态', sortable: true,  align: 'center', formatter: 'statusFormatter'  },
                { field: 'permissionValue', title: '权限值'  },
                { field: 'operate', title: '操作', align: 'center', events : operateEvents, formatter: 'operateFormatter' },
            ],

            // bootstrap-table-treegrid.js 插件配置 -- start

            //在哪一列展开树形
            treeShowField: 'name',
            //指定父id列
            parentIdField: 'pid',

            onResetView: function(data) {
                //console.log('load');
                $table.treegrid({
                    initialState: 'collapsed',// 所有节点都折叠
                    // initialState: 'expanded',// 所有节点都展开，默认展开
                    treeColumn: 1,
                    // expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                    // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                    onChange: function() {
                        $table.bootstrapTable('resetWidth');
                    }
                });

                //只展开树形的第一级节点
                $table.treegrid('getRootNodes').treegrid('expand');

            }
            // bootstrap-table-treetreegrid.js 插件配置 -- end
        });
    });

    // 格式化按钮
    function operateFormatter(value, row, index) {
        return [
            '<button type="button" class="RoleOfadd btn-small  btn-primary" style="margin-right:15px;"><i class="fa fa-plus" ></i>&nbsp;新增</button>',
            '<button type="button" class="RoleOfedit btn-small   btn-primary" style="margin-right:15px;"><i class="fa fa-pencil-square-o" ></i>&nbsp;修改</button>',
            '<button type="button" class="RoleOfdelete btn-small   btn-primary" style="margin-right:15px;"><i class="fa fa-trash-o" ></i>&nbsp;删除</button>'
        ].join('');

    }
    // 格式化类型
    function typeFormatter(value, row, index) {
        if (value === 'menu') {  return '菜单';  }
        if (value === 'button') {  return '按钮'; }
        if (value === 'api') {  return '接口'; }
        return '-';
    }
    // 格式化状态
    function statusFormatter(value, row, index) {
        if (value === 1) {
            return '<span class="label label-success">正常</span>';
        } else {
            return '<span class="label label-default">锁定</span>';
        }
    }

    //初始化操作按钮的方法
    window.operateEvents = {
        'click .RoleOfadd': function (e, value, row, index) {
            add(row.id);
        },
        'click .RoleOfdelete': function (e, value, row, index) {
            del(row.id);
        },
        'click .RoleOfedit': function (e, value, row, index) {
            update(row.id);
        }
    };
    function typeFormatter(value, row, index) {
        if (value === 'menu') {
            return '菜单'
        }
        if (value === 'button') {
            return '按钮'
        }
        if (value === 'api') {
            return '接口'
        }
        return '-'
    }

    function statusFormatter(value, row, index) {
        if (value === 1) {
            return '<span class="label label-success">正常</span>'
        }
        return '<span class="label label-default">锁定</span>'
    }
</script>
</html>
